<template>
  <div>
    <h1>Checkbox组件的使用</h1>
    <h2>单个复选框的情况（很少使用）</h2>
    <el-checkbox @change="checkbox_event" true-label="北京" v-model="checked">北京</el-checkbox>
    <el-checkbox @change="checkbox_event" true-label="上海" v-model="checked">上海</el-checkbox>
    <el-checkbox @change="checkbox_event" true-label="天津" v-model="checked">天津</el-checkbox>
    <!--checked属性最好不要和v-model同时使用-->
    <el-checkbox true-label="天津" checked>默认勾选</el-checkbox>
    <el-checkbox border disabled>禁用</el-checkbox>

    <h2>复选框组</h2>
    <el-checkbox-group @change="checkbox_event_1" :min="1" v-model="checkList">
      <el-checkbox label="复选框 A"></el-checkbox>
      <el-checkbox label="复选框 B"></el-checkbox>
      <el-checkbox label="复选框 C"></el-checkbox>
      <el-checkbox label="禁用" disabled></el-checkbox>
      <el-checkbox label="选中且禁用" disabled></el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  name: "CheckBox",
  data(){
    return{
      checked:true,
      // checkList:['选中且禁用','复选框 A']
      checkList:[]
    }
  },
  methods:{
    checkbox_event(){
      console.log(this.checked);
    },
    checkbox_event_1(){
      console.log(this.checkList);
    }
  }
}
</script>

<style scoped>

</style>
